<script setup lang="ts">
  import { useLoginOptions } from '~/pages/login/use-login-options.ts';

  const { accountRef, accountRules, isLanding, doLogin } = useLoginOptions('loginForm');
</script>

<template>
  <el-container class="login-container">
    <el-container class="h-screen !min-w-[422px] !flex-initial !flex-col items-center">
      <div class="h-[35%] min-h-[200px] pb-[20px] flex flex-col justify-end gap-1">
        <el-text class="first-letter:text-[100px]" style="--el-text-font-size: 80px">
          sinan
        </el-text>
        <el-text style="--el-text-font-size: 25px">{{ $t('login.slogan.main') }}</el-text>
        <el-text>{{ $t('login.slogan.sub') }}</el-text>
      </div>
      <el-form
        class="w-[350px]"
        :model="accountRef"
        :rules="accountRules"
        label-position="top"
        ref="loginForm"
      >
        <el-form-item :label="$t('login.account')" prop="account">
          <el-input
            type="text"
            v-model.trim="accountRef.account"
            :placeholder="$t('login.account')"
            @keydown.enter="doLogin"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('login.password')" prop="password">
          <el-input
            v-model.trim="accountRef.password"
            type="password"
            :placeholder="$t('login.password')"
            @keydown.enter="doLogin"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="w-full" type="primary" :loading="isLanding" @click="doLogin">
            <span class="first-letter:mr-5"> {{ $t('login.text') }} </span>
          </el-button>
        </el-form-item>
      </el-form>
    </el-container>
    <el-container class="right-box"></el-container>
  </el-container>
</template>

<style lang="scss" scoped>
  .login-container {
    .right-box {
      background: linear-gradient(
        120deg,
        rgba(224, 195, 252, 0.63) 0%,
        rgba(142, 197, 252, 0.44) 100%
      );
    }
  }
</style>
